<template>
  <div id="guZhang">
    <div class="bg-color-my">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left" width="0.3rem" height="0.3rem"></icon>
        </span>
        <span class="fs-xl text mx-2" style="line-height: 0.3rem;font-size: 0.2rem;color: white;">年各类故障量排行</span>
      </div>
      <div class="d-flex jc-center body-box" style="margin-top: 0;">
          <dv-scroll-ranking-board :config="ranking" style="width: 94%;margin-left: 3%;height:5rem" />
        <!-- <dv-capsule-chart :config="config" style="width: 90%;height:5.4rem" /> -->
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
        ranking: {
          data: [],
      },
    };
  },
  components: {  },
  mounted() {
	  setTimeout(()=>{
		  this.changData()
	  },200)
  },
  methods: {
  	  async changData(){
  		var _this=this;
  		let result = await _this.$http.get("api/bi/getBiGZTJ.do ");
  		if(result  &&  result.status===200){
			let data=[]
			result.data.forEach(item=>{
				data.push({name:item.gzlx_desc,value:item.num})
			})
			this.ranking.data=data
			this.ranking=JSON.parse(JSON.stringify(this.ranking))
  		}
  	  },
  }
};
</script>

<style lang="scss" scoped>
#guZhang {
  padding: 0.2rem;
  height: 5.775rem;
  border-radius: 0.0625rem;
  .bg-color-my {
    height: 5.3625rem;
    border-radius: 0.125rem;
    overflow: hidden;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>